import React, { useState } from 'react';
import './PROMOTION.css'; // 引入样式文件
import { Button } from 'antd';

interface TabItem {
  title: string;
  content: any; // 每个标签的内容
}

const MarketingSales: React.FC = (props) => {
  const imageList = props.dataList
    //tabbar的选种索引
  const [activeIndex, setActiveIndex] = useState<number>(0);
  // 切换翻页索引
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleLeftClick = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 5);
    }
  };
   const images = imageList[activeIndex].list

  const handleRightClick = () => {
    if (currentIndex < images.length - 1) {
      setCurrentIndex(currentIndex + 5);
    }
  };


//图片列表渲染
  const getContent = (imageList)=>( 
    <div style={{ width:'100%',height:'440px',display: 'flex',flexDirection: 'column',position: 'relative' }}>
        <div style={{ width: '1215px',borderRadius: '5px',margin: '10px',flex: 1,overflow: 'hidden', }}>
          <div id='contentd' style={{ transform: `translateX(-${(currentIndex / 5) * 120}%)`, transition: 'transform 0.5s ease' }}>
            {imageList.map((image, index) => (
          <dl key={index} className={`image-item ${index === currentIndex ? 'active' : ''}`}>
            <dd style={{ background:'pink',marginTop:'-45px' }}>&nbsp;</dd>
            <dt>
              <img src={image.src} alt={image.description} />
            </dt>
          </dl>
        ))}
          </div>
          <Button id='lefts' onClick={handleLeftClick} disabled={currentIndex === 0}>&lt;</Button>
          <Button id='rights' onClick={handleRightClick} disabled={currentIndex >= images.length - 5}>&gt;</Button>
        </div>
    </div> 
    )

  const handleTabChange = (index: number) => {
    setActiveIndex(index);
  };

  return (
    <div className='Marketing-sales'>
      <div style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
        <h2 style={{ marginLeft: '-15px' }}>{props.title} &gt;</h2>
        <ul className='tab-list'>
          {imageList.map((item, index) => (
            <li 
              key={index} 
              className={`tab-item ${activeIndex === index ? 'active' : ''}`} 
              onClick={() => handleTabChange(index)}
            >
              {item.title}
            </li>
          ))}
        </ul>
      </div>
      <div className='tab-content'>
            <div>{getContent(imageList[activeIndex]?.list)}</div>
      </div>
    </div>
  );
};

export default MarketingSales;